<template  >
  <div class="all">
    <!-- 页头 -->
    <el-container class="allContainer">
  <el-header class="head">
    <div class="divHead"></div>
    <el-row >
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div> <div class="topFont">车辆信息管理</div></div>
        </div></el-col>
      <div  class="divBtn">
        <el-button size="mini" type="primary" icon="el-icon-edit" @click="carsAdd">新增</el-button>
        <el-dialog title="车辆新增" :visible.sync="dialogAddgsVisible"  @close="closeDialogAddgsVisible">
            <div class="dialogAll">
              <div class="left">
            <div class="leftFont">
              车主基本信息：
            </div>
            <div class="leftForm">
              <div class="visitorForm">
                <el-form :model="visitorFormAdd"  label-width="80px" size="mini">
                  <el-form-item label="车主姓名" :required="true" style="width: 280px;">
                    <el-input v-model="visitorFormAdd.visitorName"  placeholder="请输入内容" @blur="byVisitorName"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" :required="true" style="width: 280px;">
                    <el-input  v-model="visitorFormAdd.visitorTel" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="人员性别" :required="true" style="width: 280px;">
                    <el-input  v-model="visitorFormAdd.visitorSex" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item  label="单位名称" :required="true" style="width: 280px;">
                    <el-input  v-model="visitorFormAdd.enterpriseName" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item  label="所属楼宇" :required="true" style="width: 280px;">
                    <el-input v-model="visitorFormAdd.buildingName" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item  label="房间名称" :required="true" style="width: 280px;">
                    <el-input v-model="visitorFormAdd.roomName" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="人脸照片" :required="true" style="width: 280px;">
                    <div style="width: 100px;height: 100px;" class="demo-basic--circle">
                      <div class="block"><el-avatar shape="square" :size="100" :src="visitorFormAdd.visitorImg"></el-avatar></div>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            </div>
            <div class="right">
              <div class="rightFont">
                车辆基本信息：
              </div>
              <div class="rightForm">
                <div class="carForm">
                  <el-form ref="carFormAdd"  label-width="80px" size="mini">
                  <el-form-item label="车辆类型" :required="true" style="width: 280px;float: left;">
                    <el-select size="mini" placeholder="请选择" reserve-keyword="true"
                      :clearable="true" v-model="carFormAdd.carTypeId" @change="selectChange">
                        <el-option
                        v-for="item in carTypeList"
                          :key="item.value"
                          :label="item.carTypeName"
                          :value="item.carTypeId">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="车牌号码" :required="true" style="width: 280px;float: left;margin-left: 40px;">
                    <el-input v-model="carFormAdd.carNum" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="车辆品牌" :required="true" style="width: 280px;float: left;">
                    <el-input v-model="carFormAdd.carBrand" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="车辆型号" :required="true" style="width: 280px;float: left;margin-left: 40px;">
                    <el-input v-model="carFormAdd.carModel" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间" :required="true" style="width: 280px;float: left;">
                    <el-date-picker  v-model="visitorFormAdd.accessIn" placeholder="请输入内容" :disabled="true" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间" :required="true" style="width: 280px;float: left;margin-left: 40px;">
                    <el-date-picker  v-model="visitorFormAdd.accessOut" placeholder="请输入内容" :disabled="true" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                  </el-form-item>
                </el-form>
                </div>
              </div>
            </div>
            </div>
            <div slot="footer" style="text-align: center;">
              <el-button @click="dialogAddgsVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveCarFormAdd">确 定</el-button>
            </div>
          </el-dialog>
      <el-button size="mini" type="warning" icon="el-icon-delete" @click="delByIds">批量删除</el-button>
      </div>
    </el-row>
  </el-header>
  <el-main class="bottomMain">
    <div class="divMain">
    <template>
      <!-- 模糊查询 -->
      <div class="mainTop">
  <div class="divInputAll">
    <!-- 输入框 -->
    <div class="divInput">
        <div class="inputFont">车辆号码：</div>
      <div style="float:left;">
        <el-input size="mini"
        placeholder="请输入内容"
        v-model="likeCar.carNum"
        :clearable="true">
      </el-input>
      </div>
    </div>
    <div class="divInput">
        <div class="inputFont">联系方式：</div>
      <div style="float:left;">
        <el-input size="mini"
        placeholder="请输入内容"
        v-model="likeCar.visitorTel"
        :clearable="true">
      </el-input>
      </div>
    </div>
    <div class="divSelect">
        <div class="inputFont">车辆类型：</div>
      <div style="float:left;">
        <el-select size="mini" placeholder="请选择" reserve-keyword="true"
        :clearable="true" v-model="likeCar.carTypeName" @change="selectChange">
          <el-option
          v-for="item in carTypeList"
            :key="item.value"
            :label="item.carTypeName"
            :value="item.carTypeName">
          </el-option>
        </el-select>
      </div>
    </div>
      <div  class="likeBtn">
        <el-button size="mini" type="success" icon="el-icon-search" @click="loadCarsTwo">查询</el-button>
      <el-button size="mini" plain  @click="loadCarsNull">重置</el-button>
      </div>
    </div>
  </div>
    </template>
    <!-- 查所有 -->
    <div class="divSelAll">
      <template>
  <el-table
  :data="carList"
    border
    style="width: 100%;font-size: small;margin: auto;"
    @selection-change="handleSelectionChange"
    :row-style="{height:'22px'}"
    :cell-style="{padding:'2px'}"
    >
    <el-table-column
      fixed
      type="selection"
      prop="visitorId"
      width="60">

    </el-table-column>
    <el-table-column
      fixed
      prop="visitorName"
      label="车主姓名"
      width="90">
    </el-table-column>
    <el-table-column
      prop="visitorTel"
      label="联系方式"
      width="110">
    </el-table-column>
    <el-table-column
      prop="carNum"
      label="车牌号码"
      width="90">
    </el-table-column>
    <el-table-column
      prop="carBrand"
      label="车辆型号"
      width="200">
    </el-table-column>
    <el-table-column
      prop="carModel"
      label="车辆品牌"
      width="80">
    </el-table-column>
    <el-table-column
      prop="carTypeName"
      label="车辆类型"
      width="80">
    </el-table-column>
    <el-table-column
      prop="accessIn"
      label="开始时间"
      width="160">
    </el-table-column>
    <el-table-column
      prop="accessOut"
      label="结束时间"
      width="160">
    </el-table-column>

    <el-table-column
    prop="carId"
      label="操作"
      width="131">
      <template slot-scope="scope">
        <el-button @click="descClick(scope.row)" type="text" size="small"  prop="carNum" style="margin-right:5px;">详情</el-button>
        <el-dialog title="车主详情" :append-to-body="true" :visible.sync="dialogAddgsDesc"  @close="closeDialogAddgsDesc">
            <div class="dialogAll">
              <div class="left">
            <div class="leftFont">
              车主基本信息：
            </div>
            <div class="leftForm">
              <div class="visitorForm">
                <el-form :model="visitorFormAdd"  label-width="80px" size="mini">
                  <el-form-item label="车主姓名" :required="true" style="width: 280px;">
                    <el-input v-model="visitorFormAdd.visitorName"  placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" :required="true" style="width: 280px;">
                    <el-input  v-model="visitorFormAdd.visitorTel" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="人员性别" :required="true" style="width: 280px;">
                    <el-input  v-model="visitorFormAdd.visitorSex" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item  label="单位名称" :required="true" style="width: 280px;">
                    <el-input  v-model="visitorFormAdd.enterpriseName" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item  label="所属楼宇" :required="true" style="width: 280px;">
                    <el-input v-model="visitorFormAdd.buildingName" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item  label="房间名称" :required="true" style="width: 280px;">
                    <el-input v-model="visitorFormAdd.roomName" placeholder="请输入内容" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="人脸照片" :required="true" style="width: 280px;">
                    <div style="width: 100px;height: 100px;" class="demo-basic--circle">
                      <div class="block"><el-avatar shape="square" :size="100" :src="visitorFormAdd.visitorImg"></el-avatar></div>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            </div>
            <div class="right">
              <div class="rightFont">
                车辆基本信息：
              </div>
              <div class="rightForm">
                <div class="carForm">
                  <el-form :model="carFormAdd"  label-width="80px" size="mini">
                  <el-form-item label="车辆类型" :required="true" style="width: 280px;float: left;">
                    <el-select size="mini" placeholder="请选择" reserve-keyword="true"
                      :clearable="true" v-model="carFormAdd.carTypeId" @change="selectChange">
                        <el-option
                        v-for="item in carTypeList"
                          :key="item.value"
                          :label="item.carTypeName"
                          :value="item.carTypeId">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="车牌号码" :required="true" style="width: 280px;float: left;margin-left: 40px;">
                    <el-input v-model="carFormAdd.carNum" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="车辆品牌" :required="true" style="width: 280px;float: left;">
                    <el-input v-model="carFormAdd.carBrand" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="车辆型号" :required="true" style="width: 280px;float: left;margin-left: 40px;">
                    <el-input v-model="carFormAdd.carModel" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间" :required="true" style="width: 280px;float: left;">
                    <el-date-picker  v-model="visitorFormAdd.accessIn" placeholder="请输入内容" :disabled="true"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间" :required="true" style="width: 280px;float: left;margin-left: 40px;">
                    <el-date-picker  v-model="visitorFormAdd.accessOut" placeholder="请输入内容" :disabled="true"></el-date-picker>
                  </el-form-item>
                </el-form>
              </div>
                <div>
                  <div style="width: 80%;margin-left: 30px;"><h4 style="color: rgb(75,121,2);">车辆进/出场记录:</h4></div>
                  <el-table
                    :data="carList"
                      border
                      style="width: 92%;font-size: small;margin: auto;"
                      :row-style="{height:'22px'}"
                      :cell-style="{padding:'1px'}"
                      >
                      <el-table-column
                        prop="carNum"
                        label="车牌号码"
                        width="135">
                      </el-table-column>
                      <el-table-column
                        prop="carTypeName"
                        label="车辆类型"
                        width="110">
                      </el-table-column>
                      <el-table-column
                        prop="accessIn"
                        label="开始时间"
                        width="190">
                      </el-table-column>
                      <el-table-column
                        prop="accessOut"
                        label="结束时间"
                        width="190">
                      </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            </div>
            <div slot="footer" style="text-align: center;">
              <el-button @click="dialogAddgsDesc = false">取 消</el-button>
              <el-button type="primary" @click="updateCar(scope.row)">确 定</el-button>
            </div>
          </el-dialog>
        <el-button type="text" size="small" style="margin-left: 5px;" @click="delById(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
    </div>
    <div class="divPage">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.likeCar.pageNow"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="this.likeCar.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pages.total">
    </el-pagination>
  </div>
  </div>
</el-main>

    </el-container>

  </div>
</template>

<script>
export default {
  data() {
    return {
      likeCar:{
        visitorId:"",
        visitorTel:"",
        carNum:"",
        carTypeName:"",
        pageSize:'2',
        pageNow:'1',
      },
      pages: {
        total: "",
      },
      dialogAddgsVisible: false,
      dialogAddgsDesc: false,
      carTypeList: [],
      carTypeListTwo: [],
      carList: [],
      carByIdList: [],
      visitorIds: [],
      visitorFormAdd: {
        visitorId: "",
        visitorName: "",
        visitorTel: "",
        visitorSex: "",
        enterpriseName: "",
        roomName: "",
        buildingName: "",
        visitorImg: "",
        accessOut: "",
        accessIn: "",
      },
      carFormAdd: {
        carId: "",
        carNum: "",
        carModel: "",
        carBrand: "",
        carTypeId: "",
      },
    };
  },
  methods: {
    loadCars() {
      this.$axios.post("cars/selAll", this.likeCar).then((res) => {
        this.carList = res.data.data.carList;
      });
      this.carTypesTwo();
    },
    loadCarsTwo() {
      this.$axios.post("cars/selAllTwo", this.likeCar).then((res) => {
        this.carTypes();
        this.carList = res.data.data.carListTwo.list;
        this.pages.total = res.data.data.total;
        if (
          this.pages.total <= this.likeCar.pageSize &&
          this.likeCar.carNum != null
        ) {
          this.likeCar.pageNow = 1;
        }
        if (
          this.pages.total <= this.likeCar.pageSize &&
          this.likeCar.visitorTel != null
        ) {
          this.likeCar.pageNow = 1;
        }
      });
    },
    loadCarsNull() {
      this.likeCar.carNum = "";
      this.likeCar.visitorTel = "";
      this.likeCar.carTypeName = "";
      this.loadCarsTwo();
    },
    handleSizeChange(val) {
      this.likeCar.pageSize = val;
      this.loadCarsTwo();
    },
    handleCurrentChange(val) {
      this.likeCar.pageNow = val;
      this.loadCarsTwo();
    },
    /**
       *点击新增按钮，弹出新增模态框
       */
       carsAdd(){
        this.dialogAddgsVisible = true;
        this.carTypes();
      },
      carTypes(){
        this.$axios.post("carTypes/")
        .then(res=>{
          this.carTypeList = res.data.data.carTypeList;
        })
      },
      carTypesTwo(){
        this.$axios.post("carTypes/")
        .then(res=>{
          this.carTypeListTwo = res.data.data.carTypeList;
        })
      },
      /**
       *关闭或取消模态框，清空值
       */
      closeDialogAddgsVisible(){
        this.visitorFormAdd={//初始化visitorForm中的值
        }
        this.carFormAdd={//初始化carFormAdd中的值
        }
      },
      descClick(row){
          this.dialogAddgsDesc = true;
          this.likeCar.visitorId = row.visitorId;
          this.loadCars();
          this.visitorFormAdd.visitorName = row.visitorName;
          this.visitorFormAdd.accessIn = (row.accessIn).toString;
          this.visitorFormAdd.accessOut = (row.accessOut).toString;
          this.byVisitorName();
          this.carFormAdd.carId = row.carId;
          this.selcarById();
      },
      selcarById(){
        var id = this.carFormAdd.carId
        this.$axios.get("cars/"+id)
        .then(res=>{
          this.carFormAdd = res.data.data.car;
        })
      },
      updateCar(row){
        this.carFormAdd.carId = row.carId;
        this.$axios.put("cars/",this.carFormAdd)
        .then(res=>{
          if (res.data.code==200) {
            this.dialogAddgsDesc = false;
            alert("修改成功");
            this.visitorFormAdd={};
            this.carFormAdd={};
          }
        })
      },
      closeDialogAddgsDesc(){
        this.likeCar.carNum='';
        this.visitorFormAdd={//初始化visitorForm中的值
        }
        this.carFormAdd={//初始化carFormAdd中的值
        }
        this.loadCarsTwo();
      },
      byVisitorName(){
        this.$axios.post("visitors/selByNameVisitor",this.visitorFormAdd)
        .then(res=>{
          this.visitorFormAdd = res.data.data.vistorVo;
        });
    },
    selectChange(val) {
      this.value = val;
      this.loadCarsTwo();
    },
    saveCarFormAdd() {
      var id = Number(this.visitorFormAdd.visitorId);
      this.$axios.post("cars/" + id, this.carFormAdd).then((res) => {
        this.dialogAddgsVisible = false;
        if (res.data.code) {
          alert("添加成功");
        }
        this.visitorFormAdd = {
          //初始化visitorForm中的值
        };
        this.carFormAdd = {
          //初始化carFormAdd中的值
        };
        this.loadCarsTwo();
      });
    },
    handleSelectionChange(val) {
      // console.log(val)
      this.listId = val;
    },
    //删除事件
    delByIds() {
      // 声明空数组,这里的数组是后端需要的数据
      const visitorIds = new Set();
      //遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
      for (let i = 0; i < this.listId.length; i++) {
        visitorIds.add(this.listId[i].visitorId); //把取出的对象push到数组里
      }
      this.$axios.post("cars/delByIds", visitorIds).then((res) => {
        if (res.data.code == 200) {
          alert("删除成功");
          this.loadCarsTwo();
        }
      });
    },
    delById(row) {
      let visitorId = row.visitorId;
      this.$axios.delete("cars/" + visitorId).then((res) => {
        if (res.data.code == 200) {
          alert("删除成功");
          this.loadCarsTwo();
        }
      });
    },
  },
  mounted() {
    this.loadCarsTwo();
  },
};
</script>
<style >
.all {
  width: 100%;
  height: 700px;
  background-color: rgb(240, 242, 245);
}

.allContainer {
  width: 98%;
  margin: auto;
}

.head {
  background-color: white;
  width: 100%;
  height: 10px;
  line-height: 60px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divHead {
  background-color: cornflowerblue;
  width: 7px;
  height: 50%;
  float: left;
  margin-top: 15px;
  border-radius: 2px;
  margin-left: 8px;
}

.topFont {
  float: left;
  margin-left: 18px;
  font-size: 14px;
  font-weight: 900;
}

.divBtn {
  float: right;
  margin-right: 10px;
}

.bottomMain {
  border-radius: 8px;
  width: 100%;
  height: 620px;
  margin: auto;
  margin-top: 5px;
}

.divMain {
  width: 100%;
  height: 100%;
}

.mainTop {
  width: 100%;
  height: 13%;
  margin: auto;
  border: 1px solid darkgray;
  border-radius: 5px;
}

.divInputAll {
  background-color: white;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divInput {
  border: 0px solid red;
  width: 23%;
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}

.divSelect {
  border: 0px solid red;
  width: 24.9%;
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}

.likeBtn {
  float: right;
  margin-right: 12px;
  line-height: 60px;
}

.inputFont {
  float: left;
  font-size: 10px;
}

.optionFont {
  float: right;
  color: #8492a6;
  font-size: 10px;
}

.divSelAll {
  border: 0px solid red;
  width: 100%;
  height: 70%;
  margin-top: 8px;
  line-height: 20px;
}

.divPage {
  border: 0px solid red;
  width: 100%;
  height: 8%;
  margin-top: 20px;
  line-height: 20px;
}

.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 57.5%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 1135px;
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.dialogAll {
  border: 0px solid red;
  width: 98%;
  height: 105%;
  margin: auto;
  margin-top: -30px;
}

.left {
  border: 0px solid red;
  width: 35%;
  height: 100%;
  float: left;
}

.right {
  border: 0px solid red;
  width: 64%;
  height: 100%;
  float: right;
}

.leftFont,
.rightFont {
  border: 0px solid red;
  width: 90%;
  height: 5%;
  line-height: 20px;
  text-align: left;
  font-weight: 500;
  font-family: "微软楷体";
  margin-left: 10px;
}

.leftForm,
.rightForm {
  border: 2px dashed #8492a6;
  border-radius: 10px;
  width: 99%;
  height: 94%;
}

.visitorForm {
  border: 0px solid red;
  width: 90%;
  height: 95%;
  margin: auto;
  margin-top: 30px;
  margin-left: 35px;
}

.carForm {
  border: 0px solid red;
  width: 90%;
  height: 44%;
  margin: auto;
  margin-top: 30px;
  margin-left: 35px;
}
</style>
